<template>
	<view class="example-body">
    <uni-segmented-control :current="current" :values="items" style-type="text" active-color="#2D82F6" @clickItem="onClickItem" style="margin-bottom: 20px;"/>
    <uni-grid :column="2" :show-border="false" :square="false"  @change="change">
			<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
				<view class="grid-item-box">
					<image class="image" :src="item.code" mode="scaleToFill"/>
					<text class="text">钓台：{{item.text}}</text>
					<text class="text">摄像头：{{item.text}}枪机</text>
					<view class="grid-dot">
					<uni-tag text="在线"  v-if="item.geom == null" size="small" type="success" :circle="true"/>
					<uni-tag text="离线"  v-else size="small" type="default" :circle="true"/>
					</view>
				</view>
			</uni-grid-item>
			<cell class="loading-more" v-if="list.length == 0">
				<image style="width:450rpx;height:450rpx;margin-top: 300rpx;margin-left: 50px;" src="../../static/icon/noData.png"></image>
			</cell>
		</uni-grid>
		<Popup  ref="popupRef" :direction="'center'">
			  <video  id="myVideo" style="margin-left: 15px;"
			  				src="https://vd4.bdstatic.com//mda-ng5hz4azkabg3ms4//360p//h264//1657111287763209383//mda-ng5hz4azkabg3ms4.mp4"
			  				:show-center-play-btn="true" 
			  				:enable-play-gesture="true"
			  				controls>
			  </video>
		</Popup >
	</view>
</template>
<script>
	import { mapGetters } from 'vuex';
	import { list } from '../../api/device'
    import Popup  from '@/components/ming-pop/ming-pop.vue';

	export default {
		 components:{
		  Popup 
		},
		data() {
			return {
        list: [],
        current: 0,
        items:["全部","在线","离线"],
		queryParam:{pageNum: 1,pageSize: 999,devtypebm:"DONGPINGHU_PLATFORM_DEVICE"}
      }
		},
		computed:{
			...mapGetters({
				userInfo: 'userInfo'
			})
		},
		onLoad(){
			this.getBusinessData()
		},
		methods: {
			//获取处置状态
      getBusinessData(){
        let index = 0
        list(this.queryParam).then(res => {
          this.list = []
          res.rows.forEach(item=>{
            this.list.push({
              code: "../../static/icon/fishing/sxt"+index+".png",
              text: item.devname,
              url: "./detail?id="+item.devname,
              geom: item.geom
            })
            index++
          })
				});
		},
		change(e) {
				// this.$refs.popupEdit.open()	
				this.$refs.popupRef.show()
				// uni.navigateTo({
				// 	url: this.list[e.detail.index].url,
				// })
			},
		onClickItem(e){
			if(e.currentIndex == 0){
				this.queryParam = {pageNum: 1,pageSize: 999,devtypebm:"DONGPINGHU_PLATFORM_DEVICE"}
				this.getBusinessData()
			}else if(e.currentIndex == 1){
				this.queryParam = {pageNum: 1,pageSize: 999,devtypebm:"DONGPINGHU_PLATFORM_DEVICE",isLocation:"0"}
				this.getBusinessData()
			}
			else if(e.currentIndex == 2){
				this.queryParam = {pageNum: 1,pageSize: 999,devtypebm:"DONGPINGHU_PLATFORM_DEVICE",isLocation:"1"}
				this.getBusinessData()
			}
		},
		closeDialog() {
			this.$refs.popupEdit.close()
		},
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}

	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
		height: 1450rpx;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #282830;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.image {
		width: 100%;
		height: 350rpx;
	}

	.text {
		font-size: 30rpx;
		margin-top: 10rpx;
		width: 100%;
		font-weight: 500;
  }

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 5px;
		border: 0px solid #000000;

	}

	.grid-dot {
		position: absolute;
		top: 30px;
		left: 10px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>